<template>
	<view class="main" :style="{paddingBottom:(getSafeBottom + bottomBtnHeight)+'px'}">
		<navbar title="求职意向"></navbar>
		<view class="form" :style="{paddingTop:(getStateHeight + getNavbar  ) + 'px'}">
			<uni-forms :modelValue="formData" label-position="top" :rules="rules" ref="customForm">
				<uni-forms-item label="期望行业" name="hangye">
					<view class="form-select" @click="pickerOpen('hangye')">
						<uni-easyinput type="text" v-model="formData.hangye" class="shadow"
							placeholder="请选择" disabled />
						<van-icon name="arrow-down" size="14px" color="#999" class="form-select-icon" />
					</view>
				</uni-forms-item>
				<uni-forms-item label="岗位标签" name="gangwei">
					<view class="form-select" @click="pickerOpen('gangwei')">
						<uni-easyinput type="text" v-model="formData.gangwei" class="shadow"
							placeholder="请选择" disabled />
						<van-icon name="arrow-down" size="14px" color="#999" class="form-select-icon" />
					</view>
				</uni-forms-item>
				<uni-forms-item label="工作形式" name="workType">
					<view class="form-select" @click="pickerOpen('workType')">
						<uni-easyinput type="text" v-model="formData.workType" class="shadow"
							placeholder="请选择" disabled />
						<van-icon name="arrow-down" size="14px" color="#999" class="form-select-icon" />
					</view>
				</uni-forms-item>
				<uni-forms-item label="工作时间" name="workTime">
					<view class="form-select" @click="pickerOpen('workTime')">
						<uni-easyinput type="text" v-model="formData.workTime" class="shadow"
							placeholder="请选择" disabled />
						<van-icon name="arrow-down" size="14px" color="#999" class="form-select-icon" />
					</view>
				</uni-forms-item>
				<uni-forms-item label="期待薪资" name="workSalary">
					<view class="form-line">
						<uni-easyinput type="number" v-model="formData.workSalary" class="shadow" placeholder="请输入期望薪资" />
						<view class="form-select form-line-select" @click="pickerOpen('workDanwei')">
							<uni-easyinput type="text" v-model="formData.workDanwei" class="shadow"
								placeholder="请选择" disabled />
							<van-icon name="arrow-down" size="14px" color="#999" class="form-select-icon" />
						</view>
					</view>
				</uni-forms-item>
			</uni-forms>
		</view>
		<view class="main-button" :style="{paddingBottom:getSafeBottom+'px'}">
			<view class="main-button-submit" @click="submit">
				确认
			</view>
		</view>
		<view class="main-bj">

		</view>
		
		<picker-view :list="columns" @confirm="onConfirm" ref="pickerRef"></picker-view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex';
	import Navbar from '@/components/Navbar.vue';
	import {
		postSubmit,
		postDetailToMy,
		postUpdate
	} from "@/core/web-api/qiuzhiduan.js"
	import { getData } from '@/core/web-api/common';
	import PickerView from '@/components/PickerView.vue';
	export default {
		components: {
			Navbar,
			PickerView
		},
		data() {
			return {
				formData: {
					gangwei: "",
					hangye: "",
					workDanwei: "元/天", // TODO:默认
					workSalary: null,
					workTime: "",
					workType: ""
				},
				bottomBtnHeight: uni.upx2px(140),
				rules: {},
				optionsMap:{
					hangyeColumns:[],
					gangweiColumns:[],
					workTypeColumns:[],
					workTimeColumns:[],
					workDanweiColumns:[],
				},
				columns:[],
				id:"",
			}
		},
		onReady() {
			this.$refs.customForm.setRules(this.rules)
		},
		methods: {
			
			submit() {
				this.$refs.customForm.validate().then(res => {
					let dist = JSON.parse(JSON.stringify(this.formData));
					this.id? this.update(dist):this.save(dist);
				}).catch(err => {
					console.log('err', err);
				})
			},
			
			/**
			 * 新增
			 * @param {Object} data
			 */
			save(data){
				postSubmit(data).then(res=>{
					if(res.code==20000){
						setTimeout(()=>{
							uni.navigateBack({
								delta:1,
								success() {
									uni.$emit("reload",{hangye:data.hangye,gangwei:data.gangwei})
								}
							})
						},1500)
					}
					uni.showToast({
						title:res.message,
						icon:"none",
						duration:1500
					})
				})
			},
			
			/**
			 * 编辑
			 */
			update(data){
				postUpdate(data).then(res=>{
					if(res.code==20000){
						setTimeout(()=>{
							uni.navigateBack()
						},1500)
					}
					uni.showToast({
						title:res.message,
						icon:"none",
						duration:1500
					})
				})
			},
			
			/**
			 * 弹窗显示
			 */
			pickerOpen(type) {
				this.type = type;
				this.columns = this.optionsMap[type + 'Columns'];
				this.$refs.pickerRef.open();
			},
			
			/**
			 * 选择
			 */
			onConfirm() {
				let value = this.$refs.pickerRef.value;
				this.formData[this.type] = value;
				console.log(this.formData[this.type])
				if (this.type == 'hangye') {
					this.optionsMap.gangweiColumns = this.optionsMap[this.type + "Columns"].find(f => f.sort == value)
						.datasetTreeVos
				}
			},
			
			/**
			 * 加载下拉数据
			 */
			getCataList() {
				// TODO:增加薪资单位
				let nameList = ['所属行业', '工作方式', '工作时间','工作方式','薪资单位'];
				let cataList = ['hangyeColumns', 'workTypeColumns','workTimeColumns','workTypeColumns','workDanweiColumns'
				];
				getData({
					sortList: nameList
				}).then(res => {
					if (res.code == 20000) {
						let list = res.data.list;
						list.forEach(item => {
							let index = nameList.findIndex(f => f == item.sort);
							this.optionsMap[cataList[index]] = item.list;
						})
					}
				})
			},
			
			/**
			 * 生成表单校验规则
			 */
			getRules() {
				const dist = {
					hangye: "岗位类别",
					gangwei: "岗位类型",
					workType: "工作形式",
					workTime: "工作时间",
					workSalary:"期待薪资",
				}
				let rules = {};
				for (let key in dist) {
					rules[key] = {
						rules: [{
							required: true,
							errorMessage: dist[key] + "不能为空"
						}]
					}
				}
				this.rules = rules;
			},
			
			getDetail(){
				postDetailToMy({id:this.id}).then(res=>{
					if(res.code==20000){
						let {detail} = res.data;
						for(let key in this.formData){
							this.formData[key] = detail[key]
						}
						this.formData.id = this.id
					}
				})
			}

		},
		computed: {
			...mapGetters(['getNavbar', 'getStateHeight', 'getSafeBottom']),
		},
		created() {
			this.getRules();
			this.getCataList();
		},
		onLoad(options) {
			this.id = options.id
			if(this.id){
				this.getDetail();
			}
		}
	}
</script>

<style scoped lang="less">
	.br {
		margin-bottom: 20upx;
	}

	.main {
		width: 100%;
		padding: 0 65upx;
		box-sizing: border-box;

		&-bj {
			width: 100%;
			height: 50vh;
			position: fixed;
			left: 0;
			top: 0;
			z-index: -1;
			background: linear-gradient(to bottom, #bdccfb, #f5f5f5);
		}

		&-button {
			width: 100%;
			position: fixed;
			background-color: #f5f5f5;
			left: 0;
			bottom: 0;
			padding-top: 10upx;
			z-index: 10;
			padding: 0 70upx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: center;
			padding-top: 10upx;

			view {
				height: 80upx;
				text-align: center;
				line-height: 80upx;
				border-radius: 10upx;
				font-size: 30upx;
			}

			&-submit {
				width: 569upx;
				background: linear-gradient(to bottom, #5472fd, #6ca5fd);
				color: #ffffff;
				margin-left: 15upx;
			}

			&-save {
				width: 128upx;
				background-color: #fff;
				border: 1upx solid #ccc;
				box-sizing: border-box;
				color: #666666;
			}
		}
	}

	.form {
		width: 100%;

		&-line {
			display: flex;
			align-items: center;

			&-select {
				width: 170upx;
				margin-left: 20upx;
			}
		}
		
		&-select {
			position: relative;
		
			&-icon{
				position: absolute;
				right: 20upx;
				height: 60upx;
				display: flex;
				align-items: center;
				top: 0;
			}
		}

		&-tip {
			font-size: 30upx;
			color: #000;
			width: 100%;
			text-align: center;
		}

		/deep/ .uni-easyinput__content:not(.is-textarea) {
			background-color: #fff !important;
			height: 60upx !important;
			border-radius: 10upx;
		}

		/deep/ .uni-easyinput {
			box-shadow: 10upx 0 7upx rgba(220, 220, 220, .35);
		}

		/deep/ .uni-select {
			background-color: #fff !important;
			height: 60upx !important;
			border-radius: 10upx;
			box-shadow: 10upx 0 7upx rgba(220, 220, 220, .35);
		}

		/deep/ .uni-forms-item__label {
			padding-bottom: 25upx;

			text {
				font-size: 30upx;
				color: #000;
			}
		}
		
		/deep/ .uni-easyinput__content.is-disabled {
			color: #333;
		}

		/deep/ .uni-date__x-input {
			background-color: #fff !important;
			height: 60upx !important;
			border-radius: 10upx;
			box-shadow: 10upx 0 7upx rgba(220, 220, 220, .35);
			line-height: 60upx !important;
			margin-left: 10upx;
		}

		/deep/ .input-value {
			background-color: #fff !important;
			height: 60upx !important;
			border-radius: 10upx;
			box-shadow: 10upx 0 7upx rgba(220, 220, 220, .35);
			line-height: 60upx !important;
		}

		/deep/ .checklist-box {
			&:last-child {
				margin-right: 0;
			}
		}
	}
</style>